<!DOCTYPE html>
<html>
  <head>
    <title>pizza-form.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript" src="../javascript/lib/jquery-1.9.1/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../javascript/lib/plusin/jquery.datalink.js"></script>
	<script type="text/javascript" src="../javascript/lib/plusin/modernizr-1.7.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// for browsers that don't yet process HTML5
	    	// Placeholder implementation
			if(!Modernizr.input.placeholder){
			  $('input[type=text]').each(function(){
			     $( this ).val($( this ).attr('placeholder'));
			  });    
			  $('input[type=text]').focus(function(){ 
			    if($( this ).val() === $( this ).attr('placeholder')){
			      $( this ).val('');
			    }
			  });
			  $('input[type=text]').blur(function(){
			    if($( this ).val() === ''){
			      $( this ).val($( this ).attr('placeholder'));
			    } 
			  });
			} 
	     
			// required implementation
			if(!Modernizr.input.required){
			  var $msg = $( "<div id='reqMessage'>Required Fields Missing</div>" );
			  $msg.css( "background-color", "yellow" ).hide();
			  $( "body" ).append( $msg );
			}
			// email input implementation
			var emailRegEx = /^([\w-.]+@([\w-]+.)+[\w-]{2,4})?$/;
			if( !Modernizr.inputtypes.email ){
			  $('input[type=url]').blur( function(){
			  var emailValue = $( this ).val();
			  if( emailValue !== ''){
			    var passes = emailRegEx.test(emailValue);
			    if( !passes ){
			      // display validation error message
			      $( "#errorDiv" ).show();
			      // disable submit button
			      $( "input[type='submit']" ).attr( "disabled" );
			    } else {
			      $( "#errorDiv" ).hide(); 
			      $( "input[type='submit']" ).attr( "disabled","" );
			    }
			   }
			  });
			}
			
			//订单处理
			var order = {};
			$("#pizzaOrderForm").link(order);
			//$("form").bind("submit" , function(event){ : 下一句做这样的替换也可以，就是form必须有submit按钮。
			$("[type='button']").bind("click" , function(event){
				var valid = true;
				if(!Modernizr.input.required){
					$("input[required]").each(function(){
						if($(this).val() === ""){
							$("#reqMessage").show();
							$(this).css("border" , "1px solid red");
							valid = false;
						}
					});
				}
				event.preventDefault();
				if(valid){
					$("#price").load("/a url......" , order , function(responseText, textStatus, XMLHttpRequest){
						if(textStatus === "success"){
							$("[type=button]").attr("disabled");
						}else if(textStatus === "error"){
							$("#price").append("unable to process request , game over man.");
						}
					});
				}
			});
		})
	</script>
  </head>
  
  <body>
	  <h1>Enter Order Information</h1>
	  <form id="pizzaOrderForm">
		<input type="text" name="firstName" placeholder="First Name" required ></br>
		<input type="text" name="lastName" placeholder="Last Name" required ></br>
		<input type="text" name="address" placeholder="Address" required ></br>
		<input type="text" name="state" placeholder="State" required ></br>
		<input type="text" name="zip" placeholder="Zip Code" required ></br>
		<input type="tel" name="phone" pattern="999-999-9999" placeholder="Phone" required ></br>
		<input type="email" name="email" placeholder="Email" required ></br>
		<input type="text" name="timeOfDeliver" placeholder="Time to Deliver" required ></br>
		<select name="ccType">
		  <option value="visa">Visa
		  <option value="amex">AmEx
		  <option value="discover">Discover
		</select></br>
		<input type="text" name="ccNumber" placeholder="CC Number" required ></br>
		<select name="pizzaSize">
		  <option value="0">Pick a size
		  <option value="1">personal
		  <option value="2">small
		  <option value="3">medium
		  <option value="4">large
		  <option value="5">sportsman
		</select></br>
		<label> Number of Pizzas <input type="number" name="numOfPizzas" min="0" max="99" value="0" placeholder="Zip Code" required ></label></br>
		<label>Pepperoni<input type="checkbox" name="toppings" value="pepperoni"></label></br>
		<label>Garlic<input type="checkbox" name="toppings" value="garlic"></label></br>
		<label>Mushroom<input type="checkbox" name="toppings" value="mushrooms"></label></br>
		<label>Sausage<input type="checkbox" name="toppings" value="sausage"></label></br>
		
		<input type="submit" value="Order!" ></br>
	  </form></br>
	  <div id="price"></div>

  </body>
</html>
